<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下班倒计时</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: radial-gradient(circle, #333, #000);
            color: #fff;
            text-align: center;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        #clock {
            font-size: 72px;
            font-weight: bold;
            color: #ff6f61;
            animation: pulse 1s infinite alternate;
        }
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.1);
            }
        }
        #fireworks {
            width: 100px;
            height: 100px;
            background-image: url('https://i.pinimg.com/originals/3c/d5/8c/3cd58c3125d1c78a18b7045de0d9b028.gif');
            background-size: cover;
            animation: fireworks 2s infinite;
        }
        @keyframes fireworks {
            0%, 100% {
                transform: translateY(0) rotate(0);
            }
            25% {
                transform: translateY(-20px) rotate(45deg);
            }
            50% {
                transform: translateY(0) rotate(0);
            }
            75% {
                transform: translateY(-20px) rotate(-45deg);
            }
        }
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    <h1>距离下班还有：</h1>
    <div id="clock"></div>
    <div id="fireworks"></div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        function updateClock() {
            const now = new Date();
            const targetTime = new Date();
            targetTime.setHours(17, 0, 0, 0);

            const timeDiff = targetTime - now;
            if (timeDiff <= 0) {
                document.getElementById("clock").textContent = "下班时间到啦！";
                document.getElementById("fireworks").style.display = "block";
            } else {
                const hours = String(Math.floor(timeDiff / 3600000)).padStart(2, '0');
                const minutes = String(Math.floor((timeDiff % 3600000) / 60000)).padStart(2, '0');
                const seconds = String(Math.floor((timeDiff % 60000) / 1000)).padStart(2, '0');
                document.getElementById("clock").textContent = `${hours}:${minutes}:${seconds}`;
            }
        }

        particlesJS('particles-js', {
            particles: {
                number: {
                    value: 80,
                    density: {
                        enable: true,
                        value_area: 800
                    }
                },
                color: {
                    value: "#ffffff"
                },
                shape: {
                    type: "circle",
                    stroke: {
                        width: 0,
                        color: "#000000"
                    },
                    polygon: {
                        nb_sides: 5
                    }
                },
                opacity: {
                    value: 0.5,
                    random: false,
                    anim: {
                        enable: false,
                        speed: 1,
                        opacity_min: 0.1,
                        sync: false
                    }
                },
                size: {
                    value: 3,
                    random: true,
                    anim: {
                        enable: false,
                        speed: 40,
                        size_min: 0.1,
                        sync: false
                    }
                },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#ffffff",
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 6,
                    direction: "none",
                    random: false,
                    straight: false,
                    out_mode: "out",
                    bounce: false,
                    attract: {
                        enable: false,
                        rotateX: 600,
                        rotateY: 1200
                    }
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: {
                        enable: true,
                        mode: "grab"
                    },
                    onclick: {
                        enable: true,
                        mode: "push"
                    },
                    resize: true
                },
                modes: {
                    grab: {
                        distance: 140,
                        line_linked: {
                            opacity: 1
                        }
                    },
                    bubble: {
                        distance: 400,
                        size: 40,
                        duration: 2,
                        opacity: 8,
                        speed: 3
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    },
                    push: {
                        particles_nb: 4
                    },
                    remove: {
                        particles_nb: 2
                    }
                }
            },
            retina_detect: true
        });

        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>
</html>
